import { addClass, removeClass } from '@/utils/dom'
import { setStore, getStore } from '@/utils/store'

const aliasElement = document.documentElement || document.body || document.getElementsByTagName('body')
const classNames = {
  layout: 'ui-shrink-layout',
  mode: 'ui-dark-mode',
  device: 'ui-pc-device'
}
const storeKeys = {
  layout: 'ui-layout',
  mode: 'ui-mode',
  device: 'ui-pc-device'
}

const state = {
  ui: {
    layout: '', // ui-shrink-layout
    mode: '', // ui-dark-mode
    device: '' // ui-pc-device
  }
}

const mutations = {
  SET_LAYOUT(state, statusName) {
    statusName === 'shrink' ? addClass(aliasElement, classNames.layout) : removeClass(aliasElement, classNames.layout)
    setStore(storeKeys.layout, statusName)
    state.ui.layout = statusName
  },
  SET_MODE(state, statusName) {
    statusName === 'dark' ? addClass(aliasElement, classNames.mode) : removeClass(aliasElement, classNames.mode)
    setStore(storeKeys.mode, statusName)
    state.ui.mode = statusName
  },
  SET_DEVICE(state, statusName) {
    statusName === 'pc' ? addClass(aliasElement, classNames.device) : removeClass(aliasElement, classNames.device)
    setStore(storeKeys.device, statusName)
    state.ui.device = statusName
  }
}

const actions = {
  initLayout: ({ commit }) => {
    commit('SET_LAYOUT', getStore(storeKeys.layout))
  },
  setLayout: ({ commit }, data = getStore(storeKeys.layout)) => {
    if (typeof data === 'boolean') {
      data = data ? 'shrink' : 'spread'
    }
    commit('SET_LAYOUT', data)
  },
  initMode: ({ commit }) => {
    commit('SET_MODE', getStore(storeKeys.mode))
  },
  setMode: ({ commit }, data = getStore(storeKeys.mode)) => {
    if (typeof data === 'boolean') {
      data = data ? 'dark' : 'light'
    }
    commit('SET_MODE', data)
  },
  initDevice: ({ commit }) => {
    commit('SET_DEVICE', getStore(storeKeys.device))
  },
  setDevice: ({ commit }, data = getStore(storeKeys.device)) => {
    if (typeof data === 'boolean') {
      data = data ? 'pc' : 'mobile'
    }
    commit('SET_DEVICE', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
